<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件为折叠面板用来折叠/显示过长的内容或者是列表。通常是在多内容分类项使用，折叠不重要的内容，显示重要内容。点击可以展开折叠部分。
		</demo-desc>
		
		<fu-section title="基本案例" customClass="fu-m-t-20" type="line">
			<fu-collapse>
				<fu-collapse-item padding="0" title="默认开启" :open="true">
					<text class="fu-l-h-96">折叠内容</text>
				</fu-collapse-item>
				<fu-collapse-item padding="0" title="折叠内容">
					<text class="fu-l-h-96">折叠内容</text>
				</fu-collapse-item>
				<fu-collapse-item padding="0" title="禁用状态" disabled>
					<text class="fu-l-h-96">折叠内容</text>
				</fu-collapse-item>
			</fu-collapse>
		</fu-section>
		
		<fu-section title="手风琴效果" customClass="fu-m-t-20" type="line">
			<fu-collapse accordion>
				<fu-collapse-item padding="0" title="手风琴效果">
					<text class="fu-l-h-96">折叠内容</text>
				</fu-collapse-item>
				<fu-collapse-item padding="0" title="手风琴效果">
					<text class="fu-l-h-96">折叠内容</text>
				</fu-collapse-item>
				<fu-collapse-item padding="0" title="禁用状态" disabled>
					<text class="fu-l-h-96">折叠内容</text>
				</fu-collapse-item>
			</fu-collapse>
		</fu-section>
		
		<fu-section title="配置图片" customClass="fu-m-t-20" type="line">
			<fu-collapse accordion>
				<fu-collapse-item padding="0" title="标题文字" thumb="https://img1.baidu.com/it/u=1378138503,1063416067&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300">
					<text class="fu-l-h-96">折叠内容主体，可自定义内容及样式</text>
				</fu-collapse-item>
			</fu-collapse>
		</fu-section>
		
		<fu-section title="自定义插槽" customClass="fu-m-t-20" type="line">
			<fu-collapse accordion>
				<fu-collapse-item padding="0" titleBorder="none" :border="false">
					<template v-slot:title>
						<view class="fu-font-24 fu-color-999999" slot="desc">使用了自定义插槽</view>
					</template>
					<text class="fu-l-h-96">折叠内容主体，可自定义内容及样式</text>
				</fu-collapse-item>
			</fu-collapse>
		</fu-section>
		
		<fu-section title="开启动画" customClass="fu-m-t-20" type="line">
			<view class="fu-font-20" slot="desc">
				注：App 端默认关闭组件动画 ，因为 height 动画开销比较大，会导致页面卡顿，请酌情使用动画，如出现明显卡顿，尝试关闭动画
			</view>
			<fu-collapse>
				<fu-collapse-item padding="0" :showAnimation="true" title="开启动画">
					<text class="fu-l-h-96">折叠内容</text>
				</fu-collapse-item>
				<fu-collapse-item padding="0" :showAnimation="true" title="开启动画">
					<text class="fu-l-h-96">折叠内容</text>
				</fu-collapse-item>
				<fu-collapse-item padding="0" :showAnimation="false" title="不开启动画">
					<text class="fu-l-h-96">折叠内容</text>
				</fu-collapse-item>
			</fu-collapse>
		</fu-section>
	</view>
</template>

<script>
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
</style>